<template>
  <div class="mainRoot">
    <div class="shade" v-show="loading"></div>
    <div class="loader">
      <div id="loader" v-show="loadingthis" class="loader1920"></div>
    </div>
    <div class="topBar">
        <div class="searchBar">
          <select class="searchSelect" v-model="searchSelect">
            <option value="globalsearch">全网搜</option>
            <option value="localsearch">本站搜</option>
          </select>
          <div class="line"></div>
          <input class="searchText" :class="{searchText_domain:searchSelect=='localsearch'}" type="text"  v-model="searchText" placeholder="请输入关键词.." @keyup.enter="handleSearch" >
          <input class="domain" type="text"  v-model="domain" v-if="searchSelect=='localsearch'" placeholder="请输入域名.." @keyup.enter="handleSearch">
          <button class="searchBtn" @click="handleSearch">
            <img src="./img/icon-search.png">
          </button>
        </div>
        <div class="topBarNav">
          <top-nav-item name="guide" label="" @click.native='goguide()'></top-nav-item>
          <top-nav-item name="set" label="" @click.native="goseting()"></top-nav-item>
          <top-nav-item name="bell" label="" :notify="count==0?'':count" @click.native="goPL()"></top-nav-item> 
          <el-dropdown @command="handleCommand">
          <top-nav-item name="avatar" :label="name" drop="true"></top-nav-item>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a"><i class="icon0"></i>个人中心</el-dropdown-item>
              <el-dropdown-item command="b"><i class="icon1"></i>我的收藏</el-dropdown-item>
              <el-dropdown-item command="f" v-show="role == 3"><i class="icon5" ></i>我的上报</el-dropdown-item>
              <el-dropdown-item command="g" v-show="parseInt(role) == 2||parseInt(role) == 1"><i class="icon6" ></i>我的审批</el-dropdown-item>
              <el-dropdown-item command="c"><i class="icon2"></i>登录日志</el-dropdown-item> 
              <el-dropdown-item command="d"><i class="icon3"></i>使用帮助</el-dropdown-item> 
              <el-dropdown-item command="e"><i class="icon4"></i>退<div class="kg"></div>出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
    </div>
    <div class="leftBar">
      <div class="topBarLogo" @click="gohome()"></div>
      <router-link class="leftItem home" to="/home">首页</router-link>
      <router-link class="leftItem info" to="/info">信息</router-link>
      <router-link class="leftItem topic" to="/topic">专题</router-link>
      <router-link class="leftItem brief" to="/brief">简报</router-link>
    </div>
    <div class="smallBar" >
      <smallMenu name="pao" @click.native="goQQ()" back="联系QQ"></smallMenu>
      <smallMenu name="box"  back="舆情微信" :app="true"></smallMenu>
      <smallMenu name="edit" @click.native="edit()" back="意见反馈"></smallMenu>
      <smallMenu name="mesage" back="系统公告" :count='NoticCount' @click.native="isAnnounce=true"></smallMenu>  
      <smallMenu v-show="stick == true" @click.native="getScroll"  name="stick" back="回到顶部"></smallMenu>
    </div>
    <div class="mainContent" ref="mainContent" >
      <router-view></router-view>
    </div>
    <!-- 通告 -->
    <div class="announce" v-if="isAnnounce == true">
      <div class="header">
        <span><i class="fa fa-volume-down"></i>系统通告</span>
        <span class="close" @click="isAnnounce = false">×</span>
      </div>
      <div class="bodyer">
        <div class="items" v-for="(item,i) in notice" :key="i">
          <div class="items-header">
            <!-- <span><i class="fa fa-square"></i></span>
            <span>系统信息</span> -->
            <span class="time">{{item.createTime}}</span>
          </div>
          <div class="items-bodyer">
            <span class="title">各位用户:</span>
            <div class="desc" >
              <p v-for="i in item.noticeContent.split('<br/>')" :key='i'>{{i}}</p>
            </div>
            <div class="items-footer">
              北信源舆情监测系统日常通告
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 预警 -->
    <div class="popup" v-if="alert"> 
      <div class="body">
        <div class="p-title">舆情预警</div>
        <div class="stitle">
          {{onelist.title.substring(0,8)+'...'}}
          <span>{{onelist.updateTime}}</span>
        </div>
        <div class="cont">
          {{onelist.content.substring(0,48)+'...'}}
        </div>
        <div class="more" @click="getdetail(onelist)">查看详情>></div>
        <div class="close" @click="closealert()"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {bus} from 'src/bus.js'
import TopNavItem from './TopNavItem'
import smallMenu from 'components/common/smallMenu'
export default {
  name: 'wrap-app',
  components: {TopNavItem,smallMenu},
  data(){
    return {
      searchText: '',
      searchSelect: 'localsearch',
      isAnnounce:false,
      count:'',
      stick:false,
      notice:'',
      domain:'',
      role:-1,
      alert:false,
      onelist:'',
      alertlist:[],
      contenTime:'',
      m:1,
      Itime:'',
      NoticCount:0
    }
  },
  computed:{
    loadingthis:function(){
      return this.$store.state.Info.loadingthis
    },
    loading:function(){
      return this.$store.state.Info.loading
    },
    name:function(){
      return this.$store.state.personal.name
    }
  },
  mounted(){
    window.clearInterval(this.Itime)
    this.getalert()
    this.Itime = setInterval(()=>{
      this.getalert()
    },300000)
    let main = this.$refs.mainContent
    this.getCount()
    this.getInfo()
    this.queryAll()
    this.loginTime()
    let _this = this
    bus.$on('gotab', function (n) {
      main.scrollTop = n-10;
    })
    let that = this
    bus.$on('result', function (n) {
      if(n>100)
        that.stick = true
        else
        that.stick = false
    })
    main.addEventListener('scroll', () => {
      main.scrollTop>0?this.stick = true:this.stick = false
    }, false)
  },
  watch:{
    async isAnnounce(curVal,oldVal){
      if(curVal){
          let res = await this.$http.get('vrv-monitor-platform-web/notice/updateNoticFlag')
          await this.getCount()
      }
    }
  },
  methods: {
    goguide(){
      this.$router.push('/guide')
    },
    loginTime(){
      if(localStorage.times){
        localStorage.lastTime = localStorage.times
        let time = new Date()
        localStorage.times = time
      }else{
        let time = new Date()
        localStorage.times=time
        localStorage.firstTime = time
      }
    },
    handleSearch(){
      if(this.searchText.trim()){
        this.$store.commit('result',{
          searchSelect:this.searchSelect,
          searchText:this.searchText,
          domain:this.domain
        });
        this.$store.commit('UPCOUNT');
        this.$router.push('/result');
      }else{
        this.$message.error("请输入内容")
      }
    },
    getScroll: function() {
      this.$refs.mainContent.scrollTop = 0;
      bus.$emit('searchTop')
    },
    help(){
      this.$router.push('/Help');
    },
    edit(){
      this.$router.push('/feedback');
    },
    goQQ(){
      window.open('http://wpa.qq.com/msgrd?v=3&uin=2871083790&site=oicqzone.com&menu=yes')
    },
    handleCommand(command) {
      if(command=='a'){
        this.$router.push('/personal/modifyinfo');
      }else if(command=='b'){
        this.$router.push('/personal/mycollection');
      }else if(command=='c'){
        this.$router.push('/personal/loginlog');
      }else if(command=='d'){
        this.help()
      }else if(command=='e'){
        this.$http.post('/vrv-monitor-platform-web/logout')
        this.$router.push('/login');
        window.clearInterval(this.Itime)
      }else if(command=='f'){
        this.$router.push('/report');
      }else if(command=='g'){
        this.$router.push('/approval');
      }
    },
    goPL(){
      this.count = 0
      this.$router.push('/personal/warningsetting');
    },
    goseting(){
      this.$router.push('/Setting/manage');
    },
    gohome(){
      this.$router.push('/home/page');
    },
    async queryAll(){
      let res = await this.$http.get('vrv-monitor-platform-web/notice/queryAll')
      let data = res.body
      if(data.success==true){
        this.notice = data.data
      }
    },
    getInfo(){
        this.$http.get('vrv-monitor-platform-web/user/read/userInfo').then((res)=>{
          this.info=res.body.data
          this.organizationName = res.body.organizationName
          this.count = res.body.data.alertcount||0
          this.role = res.body.role
          this.$store.commit('personalMes',{
              name:res.body.data.userName,
              photo:res.body.data.photo,
              createTime:res.body.data.createTime,
              role:this.role
          });
        })
      },
    async getalert(){
      window.clearInterval(this.contenTime)
      let res = await this.$http.post('vrv-monitor-platform-web/alert/info/queryAlertswitchByOrgCode').catch(()=>{
        window.clearInterval(this.Itime)
      })
      if(res.body.success==false){
        window.clearInterval(this.Itime)
      }
      this.alertlist = res.body.data
      if(this.alertlist.length>0){
          this.alert = true
      }else{
        return
      }
      let l = this.alertlist.length-1
      this.onelist = this.alertlist[0]
      let n = 1
      this.contenTime = setInterval(()=>{
        if(n>l){
          this.alert = false
          window.clearInterval(this.contenTime)
          return
        }
        this.onelist = this.alertlist[n]
        n++
      },3000)
    },
    closealert(){
      this.alert = false
      window.clearInterval(this.contenTime)
    },
    getdetail(item){
      window.clearInterval(this.contenTime)
      this.alert = false
      this.$store.dispatch('queryarticle',{
        id:item.invitationId,
      });
    },
    async getCount(){
      let res = await this.$http.get('vrv-monitor-platform-web/notice/queryNoticCount')
      this.NoticCount = parseInt(res.body.data)
    }
    
  }
}
</script>

<style lang="stylus" scoped>
.popup
  position fixed
  z-index 100000
  top 0
  left 0
  right 0
  bottom 0
  background rgba(0,0,0,0.5)
  .body
    position absolute
    top 50%
    left 50%
    margin-top -120px
    margin-left -190px
    width 380px
    height 240px
    background #fff
    .stitle
      margin-top 28px
      font-size 16px
      color #333333
      overflow hidden
      padding 0 23px
      span
        float right 
    .p-title
      height 60px
      text-indent  26px
      font-size 18px
      color #666666
      padding 0
      line-height 60px
      border-bottom 1px solid rgba(231, 232, 232, 1);
    .cont
      padding 21px 30px 65px
      text-align left
      font-size 14px
      color  #333333
      &.err
        padding-bottom 48px
    .more
      position absolute
      bottom 0
      width 100%
      height 40px
      font-size 14px
      line-height 40px
      color #666666
      padding 0 19px
      text-align right
      box-sizing border-box
      border-top 1px solid rgba(231, 232, 232, 1);
    .close
      position absolute
      right 22px
      top 19px
      width 17px
      height 17px
      background url('img/close.png') no-repeat
      background-size cover 
      cursor pointer
.kg
  display inline-block
  height 18px
  width 1.9rem
.el-dropdown-menu
  color #5d6267
.icon0,
.icon1,
.icon2,
.icon3
.icon4
.icon5
.icon6
  display block
  width 1rem
  height 1rem
  background-size contain
  background-repeat no-repeat
  margin-right 10px
  margin-top 10px
  float left
.icon0
  background-image url(./img/home-icon0.png)
.icon1
  background-image url(./img/home-icon1.png)
.icon2
  background-image url(./img/home-icon2.png)
.icon3
  background-image url(./img/home-icon3.png)
.icon4
  background-image url(./img/home-icon4.png)
.icon5
  background-image url(./img/officework-report.png)
.icon6
  background-image url(./img/officework-approval.png)
.shade
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  z-index 999
  background rgba(0,0,0,0)
.mainRoot
  position absolute
  top 0
  left 0
  right 0
  bottom 0

.topBar
  position: absolute
  top 0
  left 13.375rem
  right 0
  height 4.5rem
  background #fff

.topBarLogo
  margin 0 auto 
  width 106px
  height 153px
  margin-top 2.5rem 
  background url(./img/slogo.png) no-repeat
  background-size cover
  margin-bottom 2.5rem
  cursor pointer
.smallBar{
  position fixed
  right 0
  bottom 15%
  width 40px
  z-index 999
  height 176px
}
.smallBar >a{
  display block
  width 40px 
  height 40px
  border 1px solid #dcdcdc
  margin-bottom 2px
  background #fff url('./img/mesage.png') no-repeat
  background-position 50% 50%
}

.searchBar
  position: absolute
  top 1rem
  left 1.2rem
  width 29.5rem
  min-width 20.00rem
  max-width 35.00rem
  height 40px
  border 1px solid #ececec
  border-radius 0.31rem
  background #fff
  border-radius 30px
  overflow hidden
  box-sizing border-box
  display flex

.searchText
.searchSelect
.searchBtn
  box-sizing border-box
  option
    height 4rem 
  &.searchText_domain
    height 26px
    border 1px solid #dcdcdc
    line-height 26px
    margin-top 6px
    border-radius 3px

.searchText
  border none
  outline none
  background #fff
  height 100%
  flex auto
  text-indent 0.5rem
  // transition all .3s ease
  margin-left 8px
  &:focus
    background #fff
.domain
  border none
  outline none
  background #fff
  height 26px
  line-height 26px
  margin-left 8px
  margin-top 6px
  border 1px solid #dcdcdc
  box-sizing border-box
  text-indent 0.5rem
  flex 1


.searchSelect
  border none
  border-radius 30px
  outline none
  border-left 1px solid #ececec
  width 86px
  padding 0 .5rem
  height 100%
  cursor pointer
  font-family inherit
  background url(./img/down.png) no-repeat
  background-position calc(100% - 7px) 50%;
  transition all .3s ease
  appearance none
  -moz-appearance: none;
  -webkit-appearance: none;
  &:hover
    background-color #fff

.line
  width 1px
  background #ececec
  height 80%
  margin-top 5px

.searchBtn
  border none
  outline none
  height 100%
  padding  0 16px 0 11px
  background #fff
  cursor pointer
  box-shadow -0.05rem 0.31rem 0.31rem rgba(187,221,255,.2) inset
  transition all .3s ease
  &:hover
    box-shadow -0.05rem 0.31rem 0.31rem rgba(187,221,255,0) inset
  &:active
    box-shadow -0.1rem 0.31rem 0.31rem rgba(0,0,0,.1) inset

.topBarNav
  position absolute
  top 1.125rem
  right 2.00rem

.leftBar
  position absolute
  top 0
  left 0
  bottom 0
  width 12.5rem
  background-color #38418a
  padding-top 0.6rem
  text-align center
  overflow auto

.leftItem
  display block
  box-sizing border-box
  height 6rem
  padding-top 2.2rem
  padding-left 3.6rem
  color #bbc1f4
  font-size 1.3rem
  text-decoration none
  background-repeat no-repeat
  background-size 3.00rem
  background-position left 3.4rem center 
  transition all .3s ease
  margin-bottom 1.2rem
  &.router-link-active
    background-color #4b56ad
    color white

.leftItem
  for item in home info topic report setting brief
    &.{item}
      background-image: 'url(./img/%s.png)' % item
      &.router-link-active
        background-image: 'url(./img/%s-a.png)' % item

.mainContent
  position absolute
  top 4.5rem
  left 13.4rem
  right 0
  bottom 0
  min-width 1100px
  background-color #f0f5fb
  padding 1.25rem 1.4rem 0.94rem 1.25rem
  overflow auto
.el-dropdown
  margin-right 2rem
  .topnav-item
    margin-right 0
.el-dropdown-menu
  font-size 0.88rem
  .fa
    color #716969
    margin-right 1rem
    font-size 0.88rem

.announce
  position fixed
  top 0
  right 0
  width 18.5rem
  background #fff
  border 1px solid #dcdcdc
  border-right 0
  z-index 10 
  height 100vh
  overflow auto
  .header
    background #fff
    height 2.5rem
    padding 0 1.4rem
    line-height 2.5rem
    font-size 0.88rem
    color #666666
    position relative
    .fa
      font-size 1.2rem
      margin-right 0.5rem
      transform translateY(2px)
    
    .close
      position absolute
      font-size 1.5rem
      color #b5b5b5
      right 1rem
      cursor pointer
  .bodyer
    background #fff
.items
  .items-header
    height 2.5rem
    padding 0 1.4rem
    background #eee
    line-height 2.5rem
    border-top 1px solid #dcdcdc
    box-sizing border-box
    .fa 
      font-size 1rem
      color #f39800
      transform scale(0.5) translateY(2px)
    span
      display inline-block
      font-size 0.75rem
      color #666
      margin-right 0.6rem
    .time
      color #333
.items:last-child
  border-bottom 1px solid #dcdcdc
.items-bodyer
  padding 0.6rem 1.4rem 0.75rem
  font-size 0.88rem
  color #333
  line-height 1.3rem
  p
    padding 0
    margin 0
    text-indent 1rem
  .items-footer
    text-align right
    margin-top 1.2rem
    font-size 0.75rem
    color #666
.loader 
    position fixed;
    top 0
    left 13.4rem
    width 100%
    height 3px
    z-index 100
    overflow hidden
#loader
    position fixed;
    top 0
    left 13.4rem
    width 100%
    height 3px
    z-index 100
    background-image -webkit-linear-gradient(left,#4ab0f1,#4ab0f1);
@-webkit-keyframes loader1920
    0%
      transform translateX(-100%)
      -webkit-transfrom translateX(-100%)
    100%
      transform translateX(120%)
      -webkit-transfrom translateX(120%)
.loader1920
    -webkit-animation loader1920 3s linear infinite
    -moz-animation loader1920 3s linear infinite

@media screen and (max-width: 1500px) 
  .leftBar
    width 10.34rem
    .leftItem
      padding-left 3.8rem
      background-position left 2.4rem center 
  .mainContent
    left 10.34rem
  .topBar
    left 10.34rem
@media screen and (max-width: 1300px) 
  .searchBar
    width 42rem
</style>
